<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <!-- Bootstrap Styles-->
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />

    <link href="../assets/css/select2.min.css" rel="stylesheet" >
    <link href="../assets/css/checkbox3.min.css" rel="stylesheet" >
    <!-- Custom Styles-->
    <!-- <link href="assets/css/custom-styles.css" rel="stylesheet" />-->
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <script src="../js/layui/layui.js"></script>
    <link rel="stylesheet" href="../css/img.css">
</head>
<body>


<!--/. NAV TOP  -->

<div id="page-wrapper" >
    <br /><br /><br />
    <div style="left: 90%;position: relative;">
        <a href="#" class="btn btn-info" id="jqprint">打印</a>
    </div>
<div id="print">
    <div class="header">
        <h1 class="page-header" style="text-align: center">
            国内差旅 <small>（员工个人）</small>
        </h1>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">基本信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Basic Table
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <c:forEach items="${listdetails }" var="details">

                                                <tr>
                                                    <td style="text-align: right;">
                                                        报账人：
                                                    </td>
                                                    <td>
                                                        ${details.userName }
                                                    </td>

                                                    <td style="text-align: right;">
                                                        报账单位名称：
                                                    </td>
                                                    <td>
                                                        ${details.departmentName }
                                                    </td>
                                                    <td style="text-align: right;">报账人电话：</td>
                                                    <td>
                                                        ${details.phone }
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: right;">
                                                        预算指标：
                                                    </td>
                                                    <td>
                                                        差旅费
                                                    </td>

                                                    <td style="text-align: right;">
                                                        报账时间：
                                                    </td>
                                                    <td>
                                                        ${details.reimbursementTime }
                                                    </td>
                                                    <td style="text-align: right;">
                                                        附单据张数：
                                                    </td>
                                                    <td >
                                                        ${details.reimbursementNumber }
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: right;">
                                                        报账单号：
                                                    </td>
                                                    <td>
                                                        ${details.reimbursementId }
                                                    </td>

                                                    <td style="text-align: right;">
                                                        公司代码：
                                                    </td>
                                                    <td>
                                                        ${details.companyid }
                                                    </td>
                                                    <td style="text-align: right;">发票类型：</td>
                                                    <td>
                                                        ${details.invoiceTypeName }
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td style="text-align: right;">
                                                        报账说明：
                                                    </td>
                                                    <td colspan="5">
                                                        ${details.reimbursementExplain }
                                                    </td>
                                                </tr>


                                            </c:forEach>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">差旅明细</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Kitchen Sink
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>出差开始日期</th>
                                                <th>出差结束日期</th>
                                                <th>出发地</th>
                                                <th>目的地</th>
                                                <th>交通工具</th>
                                                <th>天数</th>
                                                <th>伙食补贴费</th>
                                                <th>城市间交通费</th>
                                                <th>市内交通费</th>
                                                <th>住宿费</th>
                                                <th>进项税</th>
                                                <th>其他费用</th>
                                                <th>金额总计</th>
                                                <th>预算责任中心</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <c:forEach items="${listDetailInformationBytravel }" var="listDetailInfo" varStatus="st">

                                                <tr>
                                                    <td id="startTime${st.index}" class="startTime">${listDetailInfo.businessTravelStartDate }</td>
                                                    <td >${listDetailInfo.businessTravelEndDate }</td>
                                                    <td>
                                                        ${listDetailInfo.businessTravelStartSection }
                                                    </td>
                                                    <td>
                                                        ${listDetailInfo.businessTravelEndSection }
                                                    </td>
                                                    <td >
                                                        ${listDetailInfo.vehicleName }
                                                    </td>
                                                    <td>
                                                        1
                                                    </td><!-- js计算得到 -->
                                                    <td >${listDetailInfo.foodCost }</td>
                                                    <td>${listDetailInfo.cityTrafficExpense }</td>
                                                    <td>${listDetailInfo.provinceTrafficExpense }</td>
                                                    <td>${listDetailInfo.hotelExpense }</td>
                                                    <td>${listDetailInfo.inputTax }</td>
                                                    <td>${listDetailInfo.otherCost }</td>
                                                    <td>${listDetailInfo.reimbursementMoney }</td>
                                                    <td>${listDetailInfo.预算责任中心 }</td>
                                                </tr>

                                            </c:forEach>

                                            <tr>
                                                <td style="text-align: center" colspan="5">小计</td>
                                                <td style="text-align: center;color: sandybrown" id="day">0</td>
                                                <td style="text-align: center;color: sandybrown">0</td>
                                                <td style="text-align: center;color: sandybrown">0</td>
                                                <td style="text-align: center;color: sandybrown">0</td>
                                                <td style="text-align: center;color: sandybrown">0</td>
                                                <td style="text-align: center;color: sandybrown">0</td>
                                                <td style="text-align: center;color: sandybrown">0</td>
                                                <td style="text-align: center;color: sandybrown" colspan="2"></td>
                                            </tr>

                                            <tr>
                                                <td style="text-align: center" colspan="4">含税合计金额（大写）</td>
                                                <td style="text-align: center;color: sandybrown" colspan="3" id="salaryALLC">零元整</td>
                                                <td style="text-align: center" colspan="4">含税合计金额</td>
                                                <td style="text-align: center;color: sandybrown" colspan="3" id="salaryALL">0</td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">其他</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <!--选项卡-->
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <ul class="nav nav-tabs">
                                        <li class=""><a href="#home" data-toggle="tab" aria-expanded="true">内部人信息</a>
                                        </li>
                                        <li class="active"><a href="#profile" data-toggle="tab" aria-expanded="false">报账单影像</a>

                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane fade" id="home">


                                            <!--表格-->
                                            <div class="panel panel-default">
                                                <!--   <div class="panel-heading">
                                                       Bordered Table
                                                   </div>-->

                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <div style="left: 80%; position: relative;">
                                                        <a href="#" class="btn btn-info" onclick="exportInfo()">导出</a>
                                                    </div>
                                                    <br />
                                                    <div class="table-responsive table-bordered">
                                                        <table class="table">
                                                            <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>收款人</th>
                                                                <th>所属部门</th>
                                                                <th>员工编号</th>
                                                                <th>收款类型</th>
                                                                <th>公司名称</th>
                                                                <th>开户行</th>
                                                                <th>银行账号</th>
                                                                <th>金额</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <c:forEach items="${listOtherInformation }" var="otherInformation">
                                                                    <tr>
	                                                               
	                                                                <td id="number">1</td>
	                                                                <td id="name">${otherInformation.userName }</td>
	                                                                <td id="department">${otherInformation.departmentName }</td>
	                                                                <td id="userId">${otherInformation.userId }</td>
	                                                                <td id="collection">${otherInformation.receivablesType }</td>
	                                                                <td id="companyName">${otherInformation.companyName }</td>
	                                                                <td id="bankName">${otherInformation.bankName }</td>
	                                                                <td id="bankNumber">${otherInformation.bankNumber }</td>
	                                                                <td id="money">${otherInformation.reimbursementMoney }</td>
	
	                                                            </tr>

                                                                </c:forEach>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--
                                                作者：1049794100@qq.com
                                                时间：2018-01-04
                                                描述：表格
                                            -->
                                        </div>

                                        <!--<div class="tab-pane fade active in" id="profile">
                                            <div class="layui-upload">
                                                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                                                <div class="layui-upload-list">
                                                    <table class="layui-table">
                                                        <thead>
                                                        <th>文件名</th>
                                                        <th>大小</th>
                                                        <th>状态</th>
                                                        <th>操作</th>
                                                        </thead>
                                                        <tbody id="demoList"></tbody>
                                                    </table>
                                                </div>
                                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                                    预览图：
                                                    <div class="layui-upload-list" id="demo2"></div>
                                                </blockquote>
                                                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                                            </div>
                                        </div>-->
                                        <div class="tab-pane fade active in" id="profile">
                                            <div></div>
                                            &nbsp;&nbsp;
                                            <div style="margin-left: 1%;">
                                                <c:forEach  items="${imageList }" var="image">
                                            <img alt="" src="${image.enclosureUrl }">
                                            </c:forEach>
                                               <!--  <button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i>
                                                </button> -->
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>

<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="../assets/js/jquery-1.10.2.js"></script>
<script src="../js/jquery-3.2.1/jquery.jqprint-0.3.js"></script>
<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
<!-- Bootstrap Js -->
<script src="../assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="../assets/js/jquery.metisMenu.js"></script>
<script src="../assets/js/select2.full.min.js"></script>
<script>
    $(document).ready(function() {
        $(".selectbox").select2();
    });

    $("#jqprint").click(function(){
        console.log(1111);
        $("#print").jqprint({
            debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
            importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
            printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
            operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
        });
    });

    $(function(){
    	for(var i=0;i<$(".startTime").length;i++){
    		//开始日期
    		var startTime = $("#startTime"+i).text();
    		//结束日期
    		var endTime = $("#startTime"+i).next().text();
    		//天数
    		$("#startTime"+i).next().next().next().next().next().text(DateDiff(startTime, endTime));
    		function DateDiff(sDate1, sDate2) {  //sDate1和sDate2是yyyy-MM-dd格式 
    		    var aDate, oDate1, oDate2, iDays;
    		    aDate = sDate1.split("-");
    		    oDate1 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);  //转换为yyyy-MM-dd格式
    		    aDate = sDate2.split("-");
    		    oDate2 = new Date(aDate[0] + '-' + aDate[1] + '-' + aDate[2]);
    		    iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
    		    return iDays;  //返回相差天数
    		}   		
    		//总天数
    		var day = $("#startTime"+i).next().next().next().next().next().text();
    		var dayAll = parseInt(day) + parseInt($("#day").text());
    		$("#day").text(dayAll);
    		//总伙食补贴费
    		var foodCost = $("#startTime"+i).next().next().next().next().next().next().text();
    		var foodCostAll = parseInt(foodCost) + parseInt($("#day").next().text());
    		$("#day").next().text(foodCostAll);
    		//总城市间交通费
    		var cityCost = $("#startTime"+i).next().next().next().next().next().next().next().text();
    		var cityCostAll = parseInt(cityCost) + parseInt($("#day").next().next().text());
    		$("#day").next().next().text(cityCostAll);
    		//总市内交通费
    		var provinceCost = $("#startTime"+i).next().next().next().next().next().next().next().next().text();
    		var provinceCostAll = parseInt(provinceCost) + parseInt($("#day").next().next().next().text());
    		$("#day").next().next().next().text(provinceCostAll);
    		//总住宿费
    		var hotelCost = $("#startTime"+i).next().next().next().next().next().next().next().next().next().text();
    		var hotelCostAll = parseInt(hotelCost) + parseInt($("#day").next().next().next().next().text());
    		$("#day").next().next().next().next().text(hotelCostAll);
    		//总进项税
    		var inputTax = $("#startTime"+i).next().next().next().next().next().next().next().next().next().next().text();
    		var inputTaxAll = parseInt(inputTax) + parseInt($("#day").next().next().next().next().next().text());
    		$("#day").next().next().next().next().next().text(inputTaxAll);
    		//总其他费用
    		var otherCost = $("#startTime"+i).next().next().next().next().next().next().next().next().next().next().next().text();
    		var otherCostAll = parseInt(otherCost) + parseInt($("#day").next().next().next().next().next().next().text());
    		$("#day").next().next().next().next().next().next().text(otherCostAll);
     		//总金额
    		var salary = parseInt(foodCost)*parseInt(day) + parseInt(cityCost) + parseInt(provinceCost) + parseInt(hotelCost) + parseInt(inputTax) + parseInt(otherCost);
    		$("#startTime"+i).next().next().next().next().next().next().next().next().next().next().next().next().text(salary);
    		//全部总金额
    		var allCost = $("#startTime"+i).next().next().next().next().next().next().next().next().next().next().next().next().text();
    		var salaryAll = parseInt(allCost) + parseInt($("#salaryALL").text());
    		$("#salaryALL").text(salaryAll);
    		$("#salaryALL").prev().prev().text(numtochinese(salaryAll));
    		function numtochinese(Num)
			{ 
			   var part = String(Num);		   	
			   var newchar = "";    
               for(var i=part.length-1;i>=0;i--) { 
			        var tmpnewchar = "" ;
			        var perchar = part[i]; 
			        switch(perchar){ 
			        case "0": tmpnewchar="零" + tmpnewchar ;break; 
			        case "1": tmpnewchar="壹" + tmpnewchar ;break; 
			        case "2": tmpnewchar="贰" + tmpnewchar ;break; 
			        case "3": tmpnewchar="叁" + tmpnewchar ;break; 
			        case "4": tmpnewchar="肆" + tmpnewchar ;break; 
			        case "5": tmpnewchar="伍" + tmpnewchar ;break; 
			        case "6": tmpnewchar="陆" + tmpnewchar ;break; 
			        case "7": tmpnewchar="柒" + tmpnewchar ;break; 
			        case "8": tmpnewchar="捌" + tmpnewchar ;break; 
			        case "9": tmpnewchar="玖" + tmpnewchar ;break; 
			            } 
			        switch(part.length-i-1){ 
			        case 0: tmpnewchar = tmpnewchar +"元" ;break; 
			        case 1: if(perchar!=0)tmpnewchar= tmpnewchar +"拾" ;break; 
			        case 2: if(perchar!=0)tmpnewchar= tmpnewchar +"佰" ;break; 
			        case 3: if(perchar!=0)tmpnewchar= tmpnewchar +"仟" ;break;    
			        case 4: tmpnewchar= tmpnewchar +"万" ;break; 
			        case 5: if(perchar!=0)tmpnewchar= tmpnewchar +"拾" ;break; 
			        case 6: if(perchar!=0)tmpnewchar= tmpnewchar +"佰" ;break; 
			        case 7: if(perchar!=0)tmpnewchar= tmpnewchar +"仟" ;break; 
			        case 8: tmpnewchar= tmpnewchar +"亿" ;break; 
			        case 9: tmpnewchar= tmpnewchar +"拾" ;break; 
			            } 
			        newchar = tmpnewchar + newchar; 	        			        
			    } 
			    //替换所有无用汉字 
			    while(newchar.search("零零") != -1) 
			           newchar = newchar.replace("零零", "零"); 
			           newchar = newchar.replace("零亿", "亿"); 
			           newchar = newchar.replace("亿万", "亿"); 
			           newchar = newchar.replace("零万", "万");    
			           newchar = newchar.replace("零元", "元"); 
			           newchar = newchar.replace("零角", ""); 
			           newchar = newchar.replace("零分", ""); 
			       
			           if(newchar.charAt(newchar.length-1) == "元"){
    			            newchar = newchar+"整";
        			           return newchar; 
			           } 
			   }
    		//内部人信息的金额
    		$("#salaryNoTx").text(parseInt(salaryAll) - parseInt(inputTaxAll));
    	}
    });
    
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    function exportInfo(){
    	var reimbursementId = $("#reimbursementId").text();
    	var number = $("#number").text();
    	var name = $("#name").text();
    	var department = $("#department").text();
    	var collection = $("#collection").text();
    	var companyName = $("#companyName").text();
    	var bankName = $("#bankName").text();
    	var userId = $("#userId").text();
    	var bankNumber = $("#bankNumber").text();
    	var money = $("#money").text();
    	
    	console.log(number);
    	console.log(name);
    	console.log(department);
    	console.log(collection);
    	console.log(companyName);
    	console.log(bankName);
    	console.log(userId);
    	console.log(bankNumber);
    	console.log(money);
    	
    	
    	$.ajax({
    		type:"post",
    		url:"${pageContext.request.contextPath}/Excel/exportExcel.do",
    		dataType:"json",
    		data:{"reimbursementId":reimbursementId,"number":number
    			,"name":name,"department":department,"collection":collection
    			,"companyName":companyName,"bankName":bankName,"userId":userId
    			,"bankNumber":bankNumber,"money":money},
    		success:function(data){
    			console.log("成功了");
    			layer.msg("导出成功！");
    		},
    		error:function(data){
    			layer.msg("导出失败！");
    		}
    	}); 
    }
</script>

<script src="../assets/js/custom-scripts.js"></script>



</body>
</html>
